<template>
  <div>
    <head-top
      routerName="market"
      title="商品详情"
      @to-router="toRouter"
    ></head-top>
    <van-loading v-if="loading" />
    <div class="content-wrap" v-else>
      <div class="imagesList" v-if="Goods.url">
        <van-image
          v-for="(item, index) in JSON.parse(Goods.url)"
          :key="index"
          lazy-load
          width="100%"
          :src="item"
        />
      </div>
      <div class="content" ref="result">
        <div class="cell">
          <div class="goodsPrice">
            {{ Goods.amount | formatFront
            }}<span>{{ Goods.amount | formatAfter }}元宝</span>
          </div>
          <div class="lable goodsName">
            {{ Goods.goodsDesc }}
          </div>
          <div class="goodsNumber space-between">
            <span>已售{{ Goods.sales }}件</span>
            <span>库存{{ Goods.inventory }}件</span>
          </div>
        </div>
        <div class="cell">
          <div class="lable goodsDescribe">产品描述</div>
          <div class="describe">
            {{ Goods.qq }}
          </div>
        </div>
        <div class="cell space-between">
          <div class="lable">运费</div>
          <div class="lable">
            {{ Goods.freight == "0" ? "包邮" : Goods.freight }}
          </div>
        </div>
        <div class="cell space-between">
          <div class="lable">数量</div>
          <van-stepper
            v-model="formData.goodsNum"
            min="0"
            disable-input
            :max="Goods.inventory"
            @overlimit="overlimit"
          />
        </div>
        <div class="cell space-between" @click="showAddress">
          <div class="lable">配送至</div>
          <div class="lable address">
            {{ formData.address }} <van-icon name="arrow" />
          </div>
        </div>
        <div class="cell space-between">
          <div class="lable">手续费</div>
          <div class="lable">{{ Goods.fee }}</div>
        </div>
      </div>
      <div class="buttom-height"></div>
      <div class="buttom" @click="smooth">立刻兑换</div>
    </div>
    <van-popup
      v-model="open"
      position="right"
      :style="{ height: '100%', width: '100%' }"
      ><v-address
        ref="address"
        goods
        @goods-address="goodsAddress"
        :pageNumber.sync="pageNumber"
      ></v-address
    ></van-popup>
    <password-input ref="password" @BuyData="addPayGoodsOrder"></password-input>
  </div>
</template>
<script>
import { Popup, Image as VanImage, Stepper, Toast, Icon, loading ,Lazyload} from "vant";
import HeadTop from "@/components/head";
import { detailedGoods, goodsOrder, payGoodsOrder } from "@/api/market";
import address from "@/views/address";
import md5 from "js-md5";
Vue.use(Lazyload, {
  lazyComponent: true,
});
export default {
  components: {
    HeadTop,
    [Popup.name]: Popup,
    [VanImage.name]: VanImage,
    [Stepper.name]: Stepper,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [loading.name]: loading,
    vAddress: address,
    PasswordInput: (resolve) => require(["@/components/Password"], resolve),
  },
  data() {
    return {
      loading: true,
      goodsItem: {},
      Goods: {},
      number: 1,
      formData: {
        goodsNum: "1",
        addressId: "",
        goodsId: "",
        address: "选择收货地址",
      },
      open: false,
      pageNumber: 0,
      orderNo: "",
    };
  },
  filters: {
    formatFront(text) {
      if (!text) return;
      return text.substring(0, text.indexOf("."));
    },
    formatAfter(text) {
      if (!text) return;
      return text.substr(text.lastIndexOf("."));
    },
  },
  created() {
    this.goodsItem = this.$route.query;
    const data = {
      goodsId: this.goodsItem.goodsId,
    };
    detailedGoods(data).then((res) => {
      this.loading = false;
      this.Goods = res.data.resultData[0];
      this.formData.goodsId = this.Goods.goodsId;
    });
  },
  methods: {
    overlimit(){
      Toast("库存不足");
    },
    smooth() {
      this.$refs.result.scrollIntoView({ behavior: "smooth" });
      const toast = Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "下单中...",
      });
      if (!this.formData.addressId) {
        Toast.fail("请选择配送地址");
        return;
      }
      if (this.formData.goodsNum == '0') {
        Toast.fail("请输入数量");
        return;
      }
      goodsOrder(this.formData).then((res) => {
        if (res.data.resultStatus) {
          Toast.clear();
          this.$refs.password.show();
          this.orderNo = res.data.resultData.orderNo;
        } else {
          Toast.fail(res.data.errorMessage);
          const timer = setInterval(() => {
            clearInterval(timer);
            Toast.clear();
          }, 1000);
        }
      });
    },
    addPayGoodsOrder(Password) {
      var data = {
        payPassword: md5(Password),
        orderNo: this.orderNo,
      };
      payGoodsOrder(data).then((res) => {
        if (res.data.resultStatus) {
          this.$refs.password.hide();
          Toast.success(res.data.errorMessage);
        } else {
          this.$refs.password.fail(res.data.errorMessage);
        }
      });
    },
    showAddress() {
      this.pageNumber++;
      this.open = true;
    },
    goodsAddress(item) {
      this.open = false;
      this.pageNumber--;
      if (item) {
        this.formData.addressId = item.AddressId;
        this.formData.address =
          item.province +
          "/" +
          item.city +
          "/" +
          item.district +
          "/" +
          item.address;
      }
    },
  },
  //判断app按键阻止返回上一页
  //pageNumber：0返回上一页，1关闭地址弹出，2关闭编辑和添加
  beforeRouteLeave(to, from, next) {
    if (this.pageNumber > 0) {
      this.pageNumber--;
      if (this.pageNumber === 0) {
        this.open = false;
      } else {
        this.$refs.address.addressModalhide();
      }
      next(false);
    } else {
      next(true);
    }
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .imagesList {
    font-size: 0;
    .van-image {
      /deep/.van-image__error {
        position: static;
        .van-icon {
          height: 198px;
          width: 100%;
          font-size: 198px;
        }
      }
    }
  }
  .content {
    .cell {
      border-bottom: 1px solid #f1f1f1;
      &.space-between {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .goodsPrice {
        margin-top: 5px;
        height: 30px;
        font-size: 18px;
        font-weight: 600;
        color: #f34a38;
        line-height: 30px;
        span {
          font-size: 14px;
          font-weight: 600;
          color: #f34a38;
          line-height: 25px;
        }
      }
      .lable {
        margin: 12px 0;
        line-height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        &.goodsName,
        &.goodsDescribe {
          margin: 7px 0 5px 0;
        }
      }
      .goodsNumber {
        padding-bottom: 4px;
        display: flex;
        justify-content: space-between;
        span {
          height: 17px;
          font-size: 12px;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
        }
      }
      .describe {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        line-height: 17px;
        padding-bottom: 4px;
      }
      .van-stepper {
        /deep/button {
          width: 22px;
          height: 22px;
          background: #333333;
          color: #fff;
        }
        /deep/ input {
          margin: 0;
          height: 22px;
        }
      }
      &:last-child {
        border-bottom: none;
      }
      .address {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
      }
    }
  }
  .buttom-height {
    height: 60px;
  }
}
.buttom {
  //   position: absolute;
  //   left: 17px;
  //   right: 17px;
  //   bottom: 0;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  background: #333333;
  border-radius: 2px;
  z-index: 9999;
}
</style>